<template>
  <div>
    <div class="box">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>全部商品</el-breadcrumb-item>
        <el-breadcrumb-item>分类</el-breadcrumb-item> </el-breadcrumb
      ><br />
      <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部">
        </el-tab-pane>
        <el-tab-pane
          :label="item1.category_name"
          v-for="(item1, index) in goodsName"
          :key="index"
        >
        </el-tab-pane>
        <div class="main">
            <div
              class="box-1"
              v-for="item in goodsList"
              :key="item.product_id"
            >
              <img
                :src="'http://101.132.181.9:3000/' + item.product_picture"
                alt=""
                width="150px"
                height="150px"
              />
              <div class="box-2">
                <p>{{ item.product_name }}</p>
                <p style="color: grey">{{ item.product_title }}</p>
                <p>
                  <span style="color: orange">{{
                    item.product_selling_price
                  }}</span
                  ><s style="color: grey">{{ item.product_price }}</s>
                </p>
              </div>
            </div>
          </div>
        <!-- 分页 -->
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="queryinfo.pageSize"
          :current-page="queryinfo.currentPage"
          @current-change="handleSizeChange"
        >
        </el-pagination>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { getCategory, getCategoryName, getNameList } from "../api/api";
export default {
  data() {
    return {
      goodsList: [], //全部商品
      goodsName: [], //商品名称
      total: 0,
      queryinfo: {
        currentPage: 1,
        pageSize: 8,
      },
      activeName:'0',
    };
  },
  created() {
    this.getgoodsList(); //全部商品
    this.getgoodsName(); //商品名称
  },
  methods: {
    async handleClick() {
      // console.log(this.activeName);
      try {
        if (this.activeName == "0") {
          this.goodsList();
        }
        const obj = {
          ...this.queryinfo,
          categoryID: [Number(this.activeName)],
        };
        // console.log(obj, "obj");
        const {Product} = await getNameList(obj);
        // console.log(Product,'2')
        this.goodsList = Product;
        this.total = total;
      } catch (error) {}
    },

    handleSizeChange(val) {
      //分页
      this.queryinfo.currentPage = val;
      // console.log(this.queryinfo.currentPage);
      this.getgoodsList();
    },
    async getgoodsName() {
      //商品名称
      let res = await getCategoryName();
      this.goodsName = res.category;
      // console.log(this.goodsName);

    },
    async getgoodsList() {
      //全部商品
      let res = await getCategory(this.queryinfo);
      // console.log(res,52)
      this.goodsList = res.Product;
      this.total = res.total;
    },
  },
};
</script>

<style lang="scss" scoped>
.box-1 {
  display: flex;
  background-color: white;
  width: 23%;
  height: 330px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  margin-left: 10px;
}
.box-2 {
  height: 40%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.main {
  width: 100%;
  height: 800px;
  background-color: #f5f5f5;
  display: flex;
  justify-content: space-around;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.box {
  width: 1200px;
  background-color: white;
  margin: 0 auto;
}
</style>